<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet" type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #666666;
        }
        form{
            width: 200px;
            height: 150px;
            border: 1px solid black;
            position: absolute;
            left: 40%;
            top: 30%;
            padding-left:30px ;
            padding-top: 30px;
            background-color: white;
        }
        #search{
            position: relative;
            left: 30%;
            top: 10%;
            padding: 10px;
        }
        #year{
            border-color: white;
        }
        #month{
            border-color: white;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {
            var year=document.getElementById("year");
            var month=document.getElementById("month");
            var btn_search=document.getElementById("search");
            year_reg=/^[1-9][0-9][0-9][0-9]$/;
            month_reg=/^(0[1-9]|1[0-2]|[1-9])$/;
            btn_search.onclick=function () {
                if (year.value.match(year_reg)){
                    year.style.borderColor="white";
                }else {
                    year.style.borderColor="red";
                }
                if (month.value.match(month_reg)){
                    month.style.borderColor="white";
                }else {
                    month.style.borderColor="red";
                }
            }
        }

    </script>
</head>
<body>
<form>
    年份：<input type="text" id="year"><br>
    月份：<input type="text" id="month"><br>
    <input type="button" value="查询" id="search">
</form>
</body>
</html>